<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>验证邮箱地址是否已经注册</title>
    <!-- <link rel="stylesheet" href="../assets/bootstrap/dist/css/bootstrap.min.css" /> -->
    <!-- <link rel="stylesheet" href="../assets/bootstrap/less/bootstrap.less" /> -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet" />
    <style type="text/css">
      p:not(:empty) {
        padding: 15px;
      }

      .container {
        padding-top: 100px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="form-group">
        <label>邮箱地址</label>
        <input type="email" class="form-control" placeholder="请输入邮箱地址" id="email" />
      </div>
      <!-- 错误 bg-danger 正确 bg-success -->
      <p id="info"></p>
    </div>

    <script src="../js/jquery-2.1.1.min.js"></script>
    <!-- a7 -->
    <script src="../js/ajax.js"></script>
    <!-- <script>
      // 获取页面中的元素
      var emailInpc = $('#email')
      var info = $('#info')

      // 2.2-3.4 离开焦点事件
      emailInpc.blur(function (data_name) {
        // 获取用户输入邮箱地址，this是当前发生事件的元素
        var data_name = this.value
        // 验证邮箱地址的正则表达式；
        let reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/

        console.log('bluremail', data_name)
        //
        if (!reg.test(data_name)) {
          info.text('邮箱不符合规则').addClass('bg-danger')
          // 阻止向下运行
          return
        }

        // 3.5 发送请求；
        let ajax_obj = {
          type: 'get',
          url: 'http://localhost:3000/verifyEmailAdress',
          data: {
            email: email
          },
          success(result) {
            console.log(result)
            // 3.7 把成功时候的信息，也展示到html上面；
            info.text(result.message).addClass('bg-success')
          },
          error(result) {
            info.text(result.message).addClass('bg-danger')
          }
        }

        ajax(ajax_obj)
      })
    </script> -->
    <script>
      // a1
      let eInp = document.getElementById('email')
      let info = document.getElementById('info')
      // a2
      eInp.onblur = function () {
        // console.log(1)
        // a3
        let email = this.value
        // a4
        let reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
        // a5
        if (!reg.test(email)) {
          // a6
          info.innerHTML = '邮箱地址不符合规则'
          info.className = 'bg-danger'
          return
        }
        // a8 向服务器端发送请求
        ajax({
          type: 'get',
          url: 'http://localhost:3000/verifyEmailAdress',
          data: {
            email: email
          },
          success: function (res) {
            console.log(res)
            info.innerHTML = res.message
            info.className = 'bg-success'
          },
          error: function (res) {
            console.log(res)
            info.innerHTML = res.message
            info.className = 'bg-danger'
          }
        })
      }
    </script>
  </body>
</html>
